<template>
	<div class="blog-detail-container">
		<h1>{{ blog.title }}</h1>
		<div class="aside">
			<span>日期：{{ timestampToLocal(blog.createDate) }}</span>
			<span>浏览量：{{ blog.scanNumber }}</span>
			<span>
				<a href="#comment-container">评论：{{ blog.commentNumber }}</a>
			</span>
			<span>
				<router-link
					:to="{
						name: 'categoryBlog',
						params: {
							categoryId: blog.category.id,
						},
					}"
					>{{ blog.category.name }}</router-link
				>
			</span>
		</div>
		<div v-html="blog.htmlContent" class="markdown-body"></div>
		<div class="article-over">&lt;&lt; 结束 &gt;&gt;</div>
	</div>
</template>

<script>
import { timestampToLocal } from '@/utils/time'
import 'highlight.js/styles/github.css'
import '@/styles/markdown.css'
export default {
	name: 'BlogDetail',
	props: {
		// 父组件来的文章对象
		blog: {
			type: Object,
			required: true,
		},
	},
	methods: {
		timestampToLocal,
	},
}
</script>

<style lang="less" scoped>
@import '@/styles/basic/var.less';
.blog-detail-container {
	scroll-behavior: smooth;
	h1 {
		margin: 25px 0;
	}
}
.aside {
	font-size: 14px;
	color: @gray;
	span {
		margin-right: 15px;
	}
	a {
		color: @primary;
		transition: all 0.3s;
		&:hover {
			color: lighten(@primary, 20%);
		}
	}
}
.markdown-body {
	margin-top: 20px;
}
.article-over {
	line-height: 30px;
	height: 30px;
	font-size: 1em;
	color: @gray;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 50px;
	border-bottom: 1px dashed @gray;
}
</style>
